<template>
	<view class="bill-detail">
	<view class="detail-box">
			<view class="category" @click="show = true">
				<text :class="`iconfont ${icon} icon`"></text>
				<text class="category-name">{{categoryName}}</text>
			    <u-icon name="arrow-right" style="padding: 5rpx 0 0 10rpx" color="#999" size="14"></u-icon>
			</view>
			<view class="price">{{bill.flag === 'pay' ? '-' : '+'}}{{(bill.cost / 100).toFixed(2)}}</view>
			<view class="item">
				<view class="label">记录时间</view>
				<view class="value">{{$u.timeFormat(bill.record_time, 'yyyy年mm月dd日')}}</view>
			</view>
			<view class="item">
				<view class="label">支付方式</view>
				<view class="value">{{payObj[bill.pay_method]}}</view>
			</view>
			<view class="item">
				<view class="label">备注</view>
				<view class="value">{{bill.remark}}</view>
			</view>
			<u-line style="padding: 50rpx 0 20rpx 0"></u-line>
			<view class="footer">
				<view class="f-item">
					<u--text type="error" @click="toDelete" text="删除"></u--text>
				</view>
				<view class="f-item">
					<u--text @click="toEdit" text="修改"></u--text>
				</view>
				
			</view>
		</view>
	
	<u-modal :show="showDeleteModal"  width="270px" title=""
	 @confirm="confirm" :showCancelButton="true" confirmText="删除" cancelText="取消"
		@cancel="cancel" confirmColor="red">
		<view slot="default">
			<rich-text :nodes="content" style="color: #606266"></rich-text>
		</view>
	</u-modal>	
		
	<Category ref="category" v-if="show" @closeCategory="close"/>
	 
	<u-popup :show="showEditBox" @close="closeEditBox" closeable>
	<view class="edit-box">
		<view class="item">
			<view class="label">支付方式</view>
			<view class="value">
				<u-radio-group
				  v-model="pay_method"
				  placement="row"
				>
				  <u-radio
				    :customStyle="{marginRight: '8px'}"
				    v-for="item in payMethodList"
				  activeColor="rgb(119,150,233)"
				  shape="circle"
				    :key="item.id"
				    :label="item.name"
				    :name="item.id"
				  >
				  </u-radio>
				</u-radio-group>
			</view>
		</view>
		<view class="item">
			<view class="label">备注</view>
			<view class="value">
				<u--textarea :height="160" count :autoHeight="true" v-model.trim="remark" 
				:maxlength="30" placeholder="请输入备注" autoHeight ></u--textarea>
			</view>
		</view>
		<view class="edit-footer">
			<u-button class="custom-style" color="#697AE4" @click="toUpdateInfo" text="确定"></u-button>
		</view>
	</view>
	</u-popup>
	
	 
	</view>
</template>

<script>
	import Category from '@/pages/components/category-box.vue'
	import { updateBill, deleteBill } from '@/api/bill.js'
	export default {
		components: { Category },
		data() {
			return {
				show: false,
				icon: null,
				bill: {},
				categoryId: null,
				categoryName: '',
				showDeleteModal: false,
				remark: null,
				pay_method: null,
				content: `删除后无法恢复，是否删除?`,
				payObj: {
					1: '微信',
					2: '支付宝',
					3: '银行卡',
					4: '现金',
				},
				payMethodList: [
					{id: 1, name: '微信'},
					{id: 2, name: '支付宝'},
					{id: 3, name: '银行卡'},
					{id: 4, name: '现金'},
				],
				showEditBox: false,
			}
		},
		onLoad(params) {
			this.$store.commit('bills/changeBillDetail', params)
			this.bill = params
			const { icon, category_id, category_name } = params
			this.icon = icon
			this.categoryId = category_id
			this.categoryName = category_name
		},
		methods: {
		  close(data) {
			const { categoryId, categoryName, icon } = data
			if(categoryId) {
				if(this.categoryId != categoryId) {
				  this.toUpdateBill({...this.bill, category_id: categoryId}, data)
				}else {
				  this.show = false  
				}
			}
		  },
		  async toUpdateBill(data, item) {
			  const { categoryId, categoryName, icon } = item
			  const rsp = await updateBill(data)
			  if(rsp.code === 0) {
				uni.showToast({ title: '分类修改成功', icon: 'success' }); 
			    this.categoryId = categoryId
				this.categoryName = categoryName
				this.icon = icon
			  }
			  this.show = false  
		    },
			toDelete() {
				this.showDeleteModal = true
			},
			cancel() {
				this.showDeleteModal = false
			},
			async confirm() {
			  const rsp = await deleteBill({id: this.bill.id})
				if(rsp.code === 0) {
					uni.showToast({
						title: '删除成功',
						icon:'success'
					})
					uni.navigateBack({
						delta: 1
					});
				}
			},
			closeEditBox() {
				this.showEditBox = false
			},
			toEdit() {
				this.remark = this.bill.remark
				this.pay_method = Number(this.bill.pay_method)
				this.showEditBox = true
			},
			async toUpdateInfo() {
				if(!this.pay_method) {
					uni.showToast({
						title: '请选择支付方式',
						icon: 'none'
					})
					return
				}
				const rsp = await updateBill({...this.bill, remark: this.remark, pay_method: this.pay_method})
				if(rsp.code === 0) {
					uni.showToast({
						title: '修改成功',
						icon: 'success'
					})
					this.bill.remark = this.remark
					this.bill.pay_method = Number(this.pay_method)
					this.showEditBox = false
				}
			}
		}
}

</script>

<style lang="scss" scoped>
	.bill-detail {
		background-color: #f5f5f5;
		height: calc(100vh - 140rpx);
		padding: 20rpx;
		.detail-box {
			padding: 30rpx 60rpx;
			background-color: #fff;
			border-radius: 10px;
			.category {
				display: flex;
				align-items: center;
				justify-content: center;
				.icon {
					color: #7695e8;
					font-size: 24px;
				}
				.category-name {
					color: #666;
					padding-left: 10rpx;
				}
			}
			.price {
				text-align: center;
				font-weight: 500;
				font-size: 20px;
				padding: 50rpx 0;
			}
			.item {
				display: flex;
				margin-bottom: 30rpx;
				.label {
					width: 70px;
					color: #999;
					
					margin-right: 30rpx;
				}
			}
			.footer {
				display: flex;
				align-items: center;
				justify-content: space-around;
			}
		}
	    }
		.edit-box {
			padding: 80rpx 40rpx;
		    height: 30vh;
			position: relative;
			.edit-footer {
				.custom-style {
					position: absolute;
					bottom: 100rpx;
					left: 50%;
					width: 200rpx;
					transform: translate(-50%);
					}
			}
			.item {
				display: flex;
				align-items: center;
				padding-bottom: 40rpx;
			}
			.label {
				width: 160rpx;
				color: #999;
			}
			.value {
				flex: 1;
			}
		}
		
</style>